import { Component } from 'react'
import {View, Text, Picker} from '@tarojs/components'
import { AtInputNumber } from 'taro-ui'
import { PickerTimeProps } from '@tarojs/components/types/Picker';
import {BaseEventOrig} from "@tarojs/components/types/common";
import classNames from "classnames"

import styles from "./addlog.module.scss"
import { Async } from '../../Async';

interface Props {
}

class DragItem {
  constructor(public name:string, public amount:number) {
  }
}
interface State {
  dateSel:string;
  timeSel:string;
  drags:DragItem[];
  dragList:string[];
}

export default class Index extends Component<Props, State> {
  constructor(args: Props | Readonly<Props>) {
    super(args);

    this.state = {
      dateSel:"2018-04-22",
      timeSel:"12:01",
      drags:[new DragItem("-1", 10), new DragItem("-2", 5)],
      dragList:["A", "B", "C"],
    }
  }
  componentWillMount () {

  }

  componentDidMount () {
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  onInputNumberChange(index:number, value:number):void {
    console.log("onInputNumberChange", value, index);
    this.setState((preState) => {
      preState.drags[index].amount = value;
      return preState;
    })
  }
  onDateSelChange(e:BaseEventOrig<PickerTimeProps.ChangeEventDetail>):void {
    this.setState({dateSel:e.detail.value})
  }
  onTimeSelChange(e:BaseEventOrig<PickerTimeProps.ChangeEventDetail>):void {
    this.setState({timeSel:e.detail.value})
  }

  onAddDrug(e:BaseEventOrig<PickerTimeProps.ChangeEventDetail>):void {
    this.setState((preState) => {
      preState.drags.push(new DragItem(e.detail.value, 1));
      return preState;
    })
  }

  selectAbleDrugList():string[] {
    return this.state.dragList;
  }

  render () {
    const dragList = this.state.drags.map((item, index) => {
      return (
        <View className={classNames(styles.pharmacy_bg, index<this.state.drags.length-1 ? "line_ft": '')} key={index}>
          <Text className='fontsmall'>{item.name}</Text>
          <AtInputNumber
            type='digit'
            min={0}
            step={1}
            value={item.amount}
            onChange={this.onInputNumberChange.bind(this, index)}
          />
        </View>
      )
    });

    return (
      <View className='index'>
        <View className={classNames(styles.time_bg, "line_ft")}>
          <Text>用药时间：</Text>
          <Picker mode='date' onChange={this.onDateSelChange.bind(this)} value={this.state.dateSel}>
            <Text className='tipsclick'>{this.state.dateSel}</Text>
          </Picker>
          <Picker mode='time' onChange={this.onTimeSelChange.bind(this)} value={this.state.timeSel}>
            <Text className={classNames(styles.time, 'fontsmall')}>{this.state.timeSel}</Text>
          </Picker>
        </View>

        <View className={classNames(styles.title_bg, "line_ft")}>
          <Text>用药列表</Text>
          <Picker onChange={this.onAddDrug.bind(this)} mode='selector' range={this.state.dragList}>
            <Text className={classNames(styles.title_bg_add, 'fontsmall', 'tipsclick')}>新增用药</Text>
          </Picker>
        </View>
        {dragList}
        <View className='line_hd' />
      </View>
    )
  }
}
